<template>
  <div class="back">
    <div class="box">
      <h3 class="title">欢迎登录</h3>
      <div class="box_inp">
        <i class="el-icon-user" style="color: white;"></i>
        <input
          type="text"
          class="input"
          v-model="username"
          placeholder="请输入账号"
        />
      </div>

      <div class="box_inp">
        <i class="el-icon-lock" style="color: white;"></i>
        <input
          v-model="password"
          class="input"
          placeholder="请输入密码"
          oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')"
        />
      </div>
      <el-checkbox class="checkbox" v-model="checked" @change="change">
        记住密码
      </el-checkbox>
      <button @click="btn" class="btn">登 录</button>
    </div>
  </div>
</template>

<script>
// import path from 'path'
import { zqhLogin } from '../api/index'
export default {
  data() {
    return {
      username: '',
      password: '',
      checked: false,
    }
  },
  created() {},
  methods: {
    btn() {
      zqhLogin({ username: this.username, password: this.password}).then(
        (res) => {
          console.log(res)
          if (res.code == 200) {
            let a = { username: this.username, password: this.password ,state:7 }
            localStorage.setItem('token', JSON.stringify(a))
            this.$router.push('/index')
            this.username = ''
            this.password = ''
          }
        },
      )
    },
    change() {
      if (this.checked == true) {
        this.username = 'hehe'
        this.password = '771'
      } else {
        this.username = ''
        this.password = ''
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.checkbox {
  color: white;
  margin-top: 10px;
}
.box_inp {
  width: 100%;
  height: 30px;
  border-bottom: 1px solid white;
  text-align: center;
  margin-top: 20px;
}
.input {
  width: 190px;
  outline: none;
  background: none;
  border: none;
  color: white;
  margin-left: 10px;
}
.input::-webkit-input-placeholder {
  color: #dadada;
}

.title {
  width: 80px;
  height: 30px;
  color: white;
  margin: 0 auto;
  border-bottom: 1px solid blue;
}
.back {
  width: 100%;
  height: 100vh;
  background-image: url('http://127.0.0.1:7001/public/background.png');
  background-size: 100% 100%;
}
.box {
  width: 220px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.btn {
  width: 220px;
  height: 30px;
  display: block;
  margin: 15px auto;
  background-color: blue;
  border: none;
  color: white;
  font-size: 15px;
}
</style>
